<script setup lang="ts">
import LeftCard from '@/components/vip/header/leftCard.vue'
import RightCard from '@/components/vip/header/rightCard.vue'
import VipMain from '@/components/vip/main/main.vue'
import {onBeforeMount} from "vue";
import {recorderBehavior} from "@/api/system/system";
import {commonConsoleLog, ECode} from "@/util/commonUtil";

onBeforeMount(()=>{
  // 3S后埋点信息上报
  setTimeout(() => {
    recorderBehavior({'otherData': 'VIP', 'behavior': 'VISIT_PAGE'}).then((response: any) => {
      if (response.code == ECode.SUCCESS) {
        commonConsoleLog('VIP页信息上报成功')
      }
    })
  }, 3000)
})
</script>

<template>
  <div class="vip-page">
    <header class="vip-header font-bold text-center text-4xl">
      <span class="text-amber-500">开通会员</span>
      <span>获取海量优质内容，</span>
      <span class="text-blue-500">提升学习效率</span>
    </header>
    <main class="vip-card-main">
      <section class="flex flex-col justify-between md:flex-row gap-4">
        <LeftCard/>
        <RightCard/>
      </section>
      <VipMain/>
    </main>
  </div>
</template>

<style scoped lang="less">
.vip-header {
  padding: var(--edge-tb) var(--edge-lr) var(--edge-lr);
  background: url(@/assets/vip/bg_pc.png) no-repeat top/cover;
}

.vip-card-main {
  margin: 1rem auto;
  max-width: 1400px;
}
</style>
